<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

    <link rel="stylesheet" href="/admin/js-css/css/pageLR.css">
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">
    <link rel="icon" href="img/logo.png">

    <style>
        body{
            background: #dfefff;
        }
    </style>
    <title>系统登录</title>
</head>

<body>
    <div id="app" style="display: flex;">
        <el-container>
            <div style="display: flex;height: 100%;">
                <el-aside width="200px" id="control"><iframe style="height: 99%;" :src="lefturl"
                                                             frameborder="0"></iframe></el-aside>
                <label onmousedown="mousedown(this,event)"
                       style="cursor:e-resize;max-width:1px;width:1px;background:#ddd;height: 100%;">&nbsp;</label>
                <label class="btnLeft" style="cursor:pointer;height: 100%;display: flex;align-items: center;"
                       onmousedown="mouserightbtn(this)"><label> <i class="el-icon-arrow-right btnLeft"
                                                                    style="color: #7c7c7c;cursor:pointer;"></i></label></label>
            </div>
            <el-main>
                <iframe :src="iframeurl" frameborder="0" style="width: 100%;height: 99%;"></iframe>
            </el-main>
        </el-container>

    </div>


    <!--<div id="app">
        <el-container>
            <el-aside width="200px" ><iframe style="height: 99%;" :src="lefturl" frameborder="0"></iframe></el-aside>
            <el-main>
                <iframe :src="iframeurl" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </div>-->
</body>

<script>
    var isResizing = false,
        lastDownX = 0;
    var docu = null;

    function mousedown(doc, e) {
        docu = doc;
        isResizing = true;
        lastDownX = e.clientX;
        console.log(e.clientX, e);

    }

    $(document).on('mousemove', function(e) {
        if (!isResizing) return;
        // console.log(e.clientX);
        if (e.clientX > '290') return;
        var container = $(docu).prev("#control");
        var offsetRight = (e.clientX - container.offset().left - container.width());
        container.css("width", (container.width() + offsetRight - 10) + "px");
    }).on('mouseup', function(e) {
        isResizing = false;
    });

    function mouserightbtn(doc) {
        let item = document.getElementById("control")
        if (item.style.width === "0px") {
            item.style.width = "200px"
        } else {
            item.style.width = "0px"
        }
    }
</script>


<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                lefturl:"/admin/html/module/sichuangwuye/shoufei/leftTree.html?v="+guid(),
                iframeurl:""
            }
        },
        methods:{
            setUrl(url){
                this.iframeurl = url;
            }
        }
    })
</script>

</html>